<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>dome</title>
    <link rel="stylesheet" href="images/style.css">
    <script type="text/javascript" src="images/jquery.js"></script>
</head>
<body>

<div class="wrap">
    <div class="head">
        <h1>
            <a href="http://2kid.org" title="2Kid">2Kid </a>
        </h1>

        <h2>关注web、关注前端</h2>
    </div>
    <div class="banner">
        <h3>html5地理定位 API</h3>
    </div>
    <div class="content dometop">
        <div class="box domepage">
            <h4>示例</h4>

            <div class="cont">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
你的位置信息：
<div id="geo" style="color: #A2BA49;font-weight: bold;">请稍后...</div>
<div id="add" style="color: #A2BA49;font-weight: bold;">请稍后...</div>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
    (function() {
        var geo = document.getElementById('geo');
        var add = document.getElementById('add');
        var geolocation = navigator.geolocation;
        var msg = '';
        if (geolocation) {
            var option = {timeout:10000}
            navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, option);

        }
        function updateLocation(position) {
            console.dir(position);
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var accuracy = position.coords.accuracy;
            var altitude = position.coords.altitude;
            if (!latitude || !longitude) {
                msg = '暂时无法获取';
                return;
            }
            if (typeof position.address !== "undefined") {
                var country = position.address.country;
                var province = position.address.region;
                var city = position.address.city;
                var street = position.address.street;
                var streetNumber = position.address.streetNumber;
                msg += (' 您位于 ' + country + province + city + street + streetNumber) + '<br>';
            }

            msg += '经度：' + latitude + '<br>';
            msg += '纬度：' + longitude + '<br>';
            msg += '精确度：' + accuracy + 'm<br>';
            if (altitude)msg += '高度：' + altitude + 'm<br>';


            var latlng = new google.maps.LatLng(latitude, longitude);
            var myOptions = {
                zoom: 20,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };


            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            map.setCenter(latlng);
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                add.innerHTML = results[0].formatted_address;
            });
            geo.innerHTML = msg;
        }

        function handleLocationError(error) {
            switch (error.code) {
                case 0:
                {
                    msg = error.message;
                    break;
                }
                case 1:
                {
                    msg = '您拒绝了共享地址位置！';
                    break;
                }
                case 2:
                {
                    msg = '获取位置失败！';
                    break;
                }
                case 3:
                {
                    msg = '获取位置超时！';
                    break;
                }
            }
            geo.innerHTML = msg;
        }
    })();

</script>
            </div>
        </div>
        <div class="box domelist">
            <h4>dome列表</h4>

            <div class="cont">
                <ul>
                    <li><a href="tmpdome.html">示例</a></li>


                </ul>
            </div>
        </div>
        <div class="box codepage">
            <h4>代码</h4>

            <pre class="cont">
&lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
你的位置信息：
&lt;div id="geo" style="color: #A2BA49;font-weight: bold;"&gt;请稍后...&lt;/div&gt;
&lt;div id="add" style="color: #A2BA49;font-weight: bold;"&gt;请稍后...&lt;/div&gt;
&lt;div id="map_canvas" style="width: 500px; height: 300px"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    (function() {
        var geo = document.getElementById('geo');
        var add = document.getElementById('add');
        var geolocation = navigator.geolocation;
        var msg = '';
        if (geolocation) {
            var option = {timeout:10000}
            navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, option);

        }
        function updateLocation(position) {
            console.dir(position);
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var accuracy = position.coords.accuracy;
            var altitude = position.coords.altitude;
            if (!latitude || !longitude) {
                msg = '暂时无法获取';
                return;
            }
            if (typeof position.address !== "undefined") {
                var country = position.address.country;
                var province = position.address.region;
                var city = position.address.city;
                var street = position.address.street;
                var streetNumber = position.address.streetNumber;
                msg += (' 您位于 ' + country + province + city + street + streetNumber) + '&lt;br&gt;';
            }

            msg += '经度：' + latitude + '&lt;br&gt;';
            msg += '纬度：' + longitude + '&lt;br&gt;';
            msg += '精确度：' + accuracy + 'm&lt;br&gt;';
            if (altitude)msg += '高度：' + altitude + 'm&lt;br&gt;';


            var latlng = new google.maps.LatLng(latitude, longitude);
            var myOptions = {
                zoom: 20,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };


            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            map.setCenter(latlng);
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                add.innerHTML = results[0].formatted_address;
            });
            geo.innerHTML = msg;
        }

        function handleLocationError(error) {
            switch (error.code) {
                case 0:
                {
                    msg = error.message;
                    break;
                }
                case 1:
                {
                    msg = '您拒绝了共享地址位置！';
                    break;
                }
                case 2:
                {
                    msg = '获取位置失败！';
                    break;
                }
                case 3:
                {
                    msg = '获取位置超时！';
                    break;
                }
            }
            geo.innerHTML = msg;
        }
    })();

&lt;/script&gt;


            </pre>
        </div>

    </div>
    <div class="foot">
        Copyright © 2011 <strong>2Kid</strong> |
        Powered by <a target="bank" href="http://wordpress.org/">WordPress</a> |
        Theme by <a target="bank" href="http://2kid.org">2Kid</a>
    </div>
</div>
<script type="text/javascript" src="images/dome.js"></script>
</body>
</html>